import React, { useState , useEffect,useCallback } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom"

function useWinSize(){
    const [ size , setSize] = useState({
        width:document.documentElement.clientWidth,
        height:document.documentElement.clientHeight
    })

    const onResize = useCallback(()=>{
        setSize({
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight
        })
    },[]) 
    useEffect(()=>{
        console.log('注册')
        window.addEventListener('resize',onResize)
        return ()=>{
            console.log("移除")
            window.removeEventListener('resize',onResize)
        }
    },[]
    )
    return size;

}


function Example(){
    const [ count , setCount ] = useState(0);
    const [ number , setNumber ] = useState(0);
    const size = useWinSize();
    useEffect(()=>{
        console.log(`useEffect=>You clicked ${count} times`)
        return ()=>{
            console.log('unmount解绑的时候执行')
        }
    },[]
    )

    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={()=>{setCount(count+1)}}>click me</button>
            <button onClick={()=>{setNumber(number+1)}}>click me</button>
            <div>页面Size:{size.width}x{size.height}</div>
            <Router>
                <ul>
                    <li> <Link to="/">首页</Link> </li>
                    <li><Link to="/list/">列表</Link> </li>
                </ul>
                <Route path="/" exact component={Index} />
                <Route path="/list/" component={List} />
            </Router>
        </div>
    )
}

function Index() {
    // useEffect(()=>{
    //     console.log('useEffect=>老弟，你来了！Index页面')
    //     return ()=>{
    //         console.log("unmount组件卸载")
    //     }
    // },[]
    // )
    return <h2>index.Page</h2>;
}
  
function List() {
    // useEffect(()=>{
    //     console.log('useEffect=>老弟，你来了！List页面')
    //     return ()=>{
    //         console.log("unmount组件卸载")
    //     }
    // }
    // )
    return <h2>List-Page</h2>;
}
export default Example;